<template>
  <div class="volunteer-rank-container">
    <div class="rank-header">
      <h2>{{ $t('volunteerRankingTop50') }}</h2>
    </div>

    <div class="rank-table-wrapper">
      <div class="table-header">
        <div class="header-cell rank">{{ $t('ranking') }}</div>
        <div class="header-cell name">{{ $t('volunteerName') }}</div>
        <div class="header-cell tasks">{{ $t('completedTasks') }}</div>
        <div class="header-cell hours">{{ $t('volunteerHours') }}</div>
        <div class="header-cell rating">{{ $t('fiveStarRating') }}</div>
      </div>

      <div class="table-body">
        <vue3-seamless-scroll
            :list="rankData"
            :hover="true"
            :step="0.3"
            :limitScrollNum="5"
            :wheel="true"
            class="scroll-wrapper"
            style="height: 100%"
        >
          <div
              v-for="(item, index) in rankData"
              :key="index"
              class="table-row"
              :class="{ highlight: index % 2 === 0 }"
          >
            <div class="cell rank">{{ item.rank }}</div>
            <div class="cell name">{{ item.name }}</div>
            <div class="cell tasks">{{ item.tasks }}</div>
            <div class="cell hours">{{ item.hours }} 小时</div>
            <div class="cell rating">
              <el-rate
                  v-model="item.rating"
                  disabled
                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                  :max="5"
              />
            </div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import anlyze from "../../apis/anlyze.js"

const rankData = ref([
])
const fetchRankData = async () => {
  try {
    const res = await anlyze.shotVolunteers()
    rankData.value = res.map((item, index) => ({
      rank: index + 1,
      name: item.volunteerName,
      tasks: item.completedTasks,
      hours: item.volunteerHours,
      rating: item.rating
    }))
  } catch (error) {
    console.error('获取排行榜数据失败:', error)
  }
}
onMounted(async () => {
  await fetchRankData()
})
</script>

<style scoped>
.volunteer-rank-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.rank-header h2 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

.rank-table-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #f5f7fa;
  font-weight: bold;
  color: #333;
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
}

.header-cell {
  text-align: center;
  padding: 0 6px;
  flex: 1;
}
.header-cell.rank { width: 65px; flex: none; }
.header-cell.name { width: 65px; flex: none; text-align: left; }
.header-cell.tasks { width:50px; flex: none; }
.header-cell.hours { width:50px; flex: none; }
.header-cell.rating { flex: 1; }

.table-body {
  flex: 1;
  overflow: hidden;
}

.scroll-wrapper {
  height: 100%;
}

.table-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  transition: background-color 0.3s;
  font-size: 14px;
}

.table-row:hover {
  background-color: #f0f2f5;
}

.highlight {
  background-color: #fafafa;
}

.cell {
  text-align: center;
  padding: 0 6px;
  flex: 1;
}
.cell.rank { width: 65px; flex: none; color: #f56c6c; font-weight: bold; }
.cell.name { width: 65px; flex: none; text-align: left; }
.cell.tasks { width: 50px; flex: none; }
.cell.hours { width: 50px; flex: none; }
.cell.rating { flex: 1; }

.el-rate {
  transform: scale(0.9);
}
</style>
